<template>
  <div>
    <van-nav-bar
      title="门诊预约"
      left-text="返回"
      right-text="我的订单"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-divider content-position="left">立即预约</van-divider>
    <!-- <el-card> -->
    <van-form @submit="onSubmit">
      <van-cell-group>
        <van-field
          v-model="orderList.name"
          label="姓名"
          placeholder="请输入姓名"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="orderList.age"
          label="年龄"
          placeholder="请输入年龄"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="orderList.phone"
          label="电话"
          placeholder="请输电话号码"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="orderList.symptom"
          label="症状"
          placeholder="请输入症状，多个症状用 / 分割"
        />
      </van-cell-group>
      <van-cell-group>
        <van-radio-group
          v-model="orderList.sex"
          direction="horizontal"
          style="font-size: 12px"
        >
          <span style="margin: 15px 55px 15px 15px; font-size: 14px"
            >性别：</span
          >
          <van-radio name="男">男</van-radio>
          <van-radio name="女">女</van-radio>
        </van-radio-group>
      </van-cell-group>
      <div style="margin:15px 0 0 0;padding:5px 15px; font-size:14px">
        <span>诊室：</span>
        <el-select v-model="doctorID" placeholder="请选择就诊医生" style="margin-left:50px">
          <el-option
            v-for="item in doList"
            :key="item._id"
            :label="
              '科室：' + item.department + '-----' + '有余号（可预约）'
            "
            :value="item._id"
          >
          </el-option>
        </el-select>
      </div>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >立即预约</van-button
        >
      </div>
    </van-form>
    <!-- </el-card> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      orderList: {
        name: '',
        age: '',
        sex: '',
        phone: '',
        symptom: ''
      },
      doList: [],
      doctorID: '',
      show: false,
      patientID: window.sessionStorage.getItem('id')
    }
  },
  created () {
    this.getDoctorList()
  },
  methods: {
    onClickLeft () {
      this.$router.push('/index')
    },
    onClickRight () {
      this.$router.push('/myorder')
    },
    async onSubmit () {
      const { data: res } = await this.$http.post(
        '/api/order/add/' + this.doctorID,
        this.orderList
      )
      if (res.status !== 200) return this.$Toast.faile('预约门诊失败')
      const orderID = res.info._id
      const info = { name: '', orderID: '' }
      info.name = this.orderList.name
      info.orderID = orderID
      const { data: ress } = await this.$http.post(
        '/user/myorder/add/' + this.patientID,
        info
      )
      if (ress.status !== 200) return this.$Toast.faile('订单添加失败')
      this.$Toast.success('预约成功，可前往我的订单查看状态')
    },
    async getDoctorList () {
      const { data: res } = await this.$http.get('/server/doctor/list')
      if (res.status !== 200) return this.$Toast.faile('获取推荐列表失败')
      this.doList = res.doctorList
    }
  }
}
</script>

<style scoped>
/* .van-radio-group{
  margin: 20px 0px;
} */
</style>
